<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="script" href="js/axios-0.18.0.js">
</head>
<body>
<div class="all">
<!--    侧边栏区域-->
    <div class="sidebar">
        <div class="greet">
            <p>你好：</p>
            <p class="username">谁谁谁!</p>
        </div>
        <ul>
            <li><div>活动录入</div></li>
            <li><div>请假申请</div></li>
            <li><div>请假审批</div></li>
        </ul>
    </div>
<!--    请假展示区域-->
    <div class="content">
            <div class="applicationLeave">
<!--                请假申请按钮-->
                <div class="button"><span>请假申请</span></div>
                <div class="showLeave">
                    <div class="title">
                        <span>开始时间</span>
                        <span>结束时间</span>
                        <span>共几天</span>
                        <span>请假类型</span>
                        <span>请假状态</span>
<!--                        <span>操作</span>  可选-->
                    </div>
                    <ul class="data">
                        <li>
                            <div>
                                <span>2023-10-01</span>
                                <span>2023-10-07</span>
                                <span>6</span>
                                <span>病假</span>
                                <span>审批中</span>
                            </div>
                        </li>
                        <li>
                            <div>
                                <span>2023-10-01</span>
                                <span>2023-10-07</span>
                                <span>6</span>
                                <span>病假</span>
                                <span>审批中</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="activityEntering"></div>
            <div class="checkLeave"></div>
    </div>
    <!--请假申请框弹框-->
    <div class="submitData">
        <form class="leaveForm">
            <div><span>开始时间：</span><input type="text" class="insert" name="starTime"></div>
            <div><span>结束时间：</span><input type="text" class="insert" name="endTime"></div>
            <div>
                <input type="radio" name="1" value="1"><span>病假</span>
                <input type="radio" name="1" value="2"><span>事假</span>
            </div>
            <div><span>请假理由：</span><input type="text" class="insert" name="reason"></div>
            <input type="submit" class="submitButton">
        </form>
    </div>
</div>
<script>
//获取请假信息
axios({
    url: "",
    method:"GET",
}).then(result=>{
    //打印请假信息
    console.log(result);
    //写入ul标签
    const data=document.querySelector(".data");
    let starTime;
    let endTime;
    let days;
    let radio;
    data.innerHTML(`
    <li>
                            <div>
                                <span>${starTime}</span>
                                <span>${endTime}</span>
                                <span>${days}</span>
                                <span>${radio}</span>
                                <span>审批中</span>
                            </div>
                        </li>
    `)
});

    //请假框交互
    const submit=document.querySelector(".button");
    const submitData=document.querySelector(".submitData");
    const submitButton=document.querySelector(".submitButton");
    submit.addEventListener("click",e=>submitData.style.display="flex");
    submitButton.addEventListener("click",e=>{
       submitData.style.display="none";
       //获取表单信息
        const starTime=document.getElementsByName("starTime")[0].values();
        const endTime=document.getElementsByName("endTime")[0].values();
        const reason=document.getElementsByName("reason")[0].valueOf();
        const radios=document.getElementsByName("1");
        let radio;
        for (let i = 0; i < radios.length; i++) {
            if (radios[i].checked) {
                radio = radios[i].value;
                break;
            }
        }

    //   提交请假信息
        axios({
            url: "",
            method: "POST",
            //开始时间、结束时间、请假类型、请假理由
            param:{starTime:starTime,endTime:endTime,radio:radio,reason:reason}
        }).then(result=>{
            //置空表单
            const leaveForm=document.querySelector(".leaveForm").reset();
           //成功或失败
            console.log(result);
        })
    });
</script>
</body>
</html>